<!-- 来煤计划 -->
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// table-list 搜索
const searchTime = ref('')

const searchTimeIndex = ref(0)
function clickSearchTime(index: number) {
    searchTimeIndex.value = index
    searchTime.value = ''
}
function changeSearchTime() {
    searchTimeIndex.value = 3
}

//table设置
const tableHeight = ref(0)
let listTableData = ref([])

// 定义表格数据的类型
interface TableRow {
    id: number;
    time: string;
    name: string;
    name1: string;
}

// 保存选中项的 ID 列表
const selectedRowIds = ref<Set<number>>(new Set());

// 处理选中项变化的函数
const handleSelectionChange = (selection: TableRow[]) => {
    // 更新选中项 ID 列表
    selectedRowIds.value = new Set(selection.map((item) => item.id));
};

// 自定义行类名的函数
const rowClassName = ({ row }: { row: TableRow }): string => {
    return selectedRowIds.value.has(row.id) ? 'selected-row' : '';
};
const rowInfoClassName = (id:number) => {
    return selectedRowIds.value.has(id) ? 'selected_bg' : '';
}


//table样式自定义
const headerCellStyle = {
    padding: '16px 0'
}

//table 保存修改
function tableDataSave() {
    tableDialogVisible.value = true
}
const tableDialogVisible = ref(false)
function clickTableDialog() {
    tableDialogVisible.value = false
    ElMessage({
        message: '已修改，数据已更新',
        type: 'success',
    })
    //ElMessage.error('修改失败，请重新提交')
}

const inputVal1 = ref('')
const inputVal2 = ref('')
const state = ref('')

const stateOptions = [
    {
        value: '0',
        label: '未达到',
    },
    {
        value: '1',
        label: '已达到',
    }
]


// 新增
const addDialogVisible = ref(false)

const formInline = reactive({
  name1: '',
  name2: '',
  name3: '',
  name4: '',
  name5: '',
  name6: '',
  name7: '',
  name8: '',
  name9: '',
})


//明细
const addInfoList = ref([
    {
        name1:'',
        name2:'',
        name3:'',
        name4:'',
    }
])


const checkedVal = ref('')


// 修改
const editDialogVisible = ref(false)
const infoDialogVisible = ref(false)

//预测
const forecastVisible = ref(false)

const formForecast = ref({
    name1:'',
    name2:'',
    name3:'',
    name4:'',
})

import { CoalInPlanList, AllFuelTypeList, AllSupplierMsgList, addCoalInPlan, delCoalInPlan } from "@/api";
//list
function getBunkerInRecordList(){
    CoalInPlanList().then(res=>{
        listTableData.value = res.data.result
        console.log(listTableData)
    })
}

//煤炭种类
interface CoalTypes {
    ftId: number;
    ftName: string;
    ftCode: string;
}
let coalTypes = ref<CoalTypes[]>([])
function getAllFuelTypeList(){
    AllFuelTypeList().then(res=>{
        coalTypes.value = res.data
        //console.log(res.data)
    })
}

// 供应商
interface SupplierTypes {
    id: number;
    contacter: string;
    supplierName: string;
    contactPhone: string;
    contactAddress: string;
    remark: string;
}
let supplierData = ref<SupplierTypes[]>([])
function getAllSupplierMsgList(){
    AllSupplierMsgList().then(res=>{
        supplierData.value = res.data
        //console.log('供应商----',res.data)
    })
}

const addForm = ref({
    shipNo: '',
    shipName: '',
    suplierId: '',
    entryQuality: '',
    berthingDock:'',

    planArriveTime: '',
    planInTime: '',
    planWeight:'',
    palnInRecordDetailViews:[
        {
            batchNo:'',
            ftId: '',
            heatValue: '',
            weight:'',
        }
    ]
})
function clickAddInfoData(){
    addForm.value.palnInRecordDetailViews.push({
        batchNo:'',
        ftId: '',
        heatValue: '',
        weight:'',
    })
}
function clickDelInfoData(index:number){
    addForm.value.palnInRecordDetailViews.splice(index, 1);
}
//新增
const clickAddPlan = () => {
    console.log(addForm.value)
    addCoalInPlan(addForm.value).then(res=>{
        console.log('新增----',res)
    })
}


// 删除
const clickDelCoalInPlan = (id:number) => {
    ElMessageBox.confirm(
        '是否确定删除，删除后不能恢复?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    )
    .then(() => {
        delCoalInPlan(687984).then(res=>{
            console.log('删除----',res)
            
                ElMessage({
                    type: 'success',
                    message: '已成功删除',
                })
            
            
                ElMessage.error('删除失败，请重新删除')
            
            
        })
    })
}
onMounted(() => {
    // 获取页面高度
    tableHeight.value = window.innerHeight - 310;
    getBunkerInRecordList()
    getAllFuelTypeList()
    getAllSupplierMsgList()
});
</script>
<template>
    <!-- 弹出框/新增 -->
    <el-dialog v-model="addDialogVisible" title="新增来煤计划" width="900" :align-center="true">
        <div class="dialog_main">
            <el-form :inline="true" :model="addForm" class="mt15 form-inline-row-two" label-width="100" >
                <el-form-item label="航次:">
                    <el-input v-model="addForm.shipNo" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="船名:">
                    <el-input v-model="addForm.shipName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="供应商名称:">
                    <el-select v-model="addForm.suplierId" placeholder="请选择">
                        <el-option v-for="(item,index) in supplierData"
                            :key="item.id"
                            :label="item.supplierName"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="入厂质量验收:">
                    <el-input v-model="addForm.entryQuality" placeholder="请输入"  />
                </el-form-item>
                <el-form-item label="靠泊码头:">
                    <el-input v-model="addForm.berthingDock" placeholder="请输入"  />
                </el-form-item>
                <div class="form_title">计划</div>
                <el-form-item label="计划到厂时间:">
                    <el-date-picker v-model="addForm.planArriveTime" type="date" placeholder="请选择" clearable />
                </el-form-item>
                <el-form-item label="计划靠泊时间:">
                    <el-date-picker v-model="addForm.planInTime" type="date" placeholder="请选择" clearable />
                </el-form-item>
                <!-- <el-form-item label="计划离岸时间:">
                    <el-date-picker v-model="formInline.name3" type="date" placeholder="请选择" clearable />
                </el-form-item> -->
                <el-form-item label="计划来煤重量:">
                    <el-input v-model="addForm.planWeight" placeholder="请输入" clearable />
                </el-form-item>
            </el-form>
            <div class="form_title">来煤计划明细</div>
            <div class="table_info small">
                <table>
                    <colgroup>
                        <col width="30%">
                        <col width="20%">
                        <col width="20%">
                        <col width="20%">
                        <col width="10%">
                    </colgroup>
                    <tr>
                        <th>批次号</th>
                        <th>所属煤种</th>
                        <th>热值</th>
                        <th>重量</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(item,index) in addForm.palnInRecordDetailViews">
                        <td>
                            <el-input v-model="item.batchNo" input-style="text-al" placeholder="填写批次号或对接口获取" />
                        </td>
                        <td>
                            <el-select v-model="item.ftId" placeholder="请选择"  >
                                <el-option
                                    v-for="item in coalTypes"
                                    :key="item.ftId"
                                    :label="item.ftName"
                                    :value="item.ftId"
                                />
                            </el-select>
                        </td>
                        <td>
                            <el-input v-model="item.heatValue" placeholder="" />
                        </td>
                        <td>
                            <el-input v-model="item.weight" placeholder="" />
                        </td>
                        <td>
                            <img @click="clickDelInfoData(index)" src="../../assets/img/ico_del.png" alt="">
                        </td>
                    </tr>
                </table>
            </div>
            <div class="mt15" @click="clickAddInfoData">
                <img src="../../assets/img/ico_add.png" alt="">
            </div>
            <div class="checkbox_zd">
                <el-checkbox v-model="checkedVal" label="自动记录到“来煤记录”" />
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;" @click="clickAddPlan">
                    添加
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 弹出框/修改 -->
    <el-dialog v-model="editDialogVisible" title="修改来煤计划" width="900" :align-center="true">
        <div class="dialog_main">
            <el-form :inline="true" :model="formInline" class="mt15 form-inline-row-two" label-width="100">
                <el-form-item label="航次:">
                    <el-input v-model="formInline.name1" placeholder="请输入" clearable  style="width: 260px;" />
                </el-form-item>
                <el-form-item label="船名:">
                    <el-input v-model="formInline.name1" placeholder="请输入" clearable  style="width: 260px;" />
                </el-form-item>
                <el-form-item label="供应商名称:">
                    <el-input v-model="formInline.name1" placeholder="请输入" clearable  style="width: 260px;" />
                </el-form-item>
                <el-form-item label="入厂质量验收:">
                    <el-input v-model="formInline.name1" placeholder="请输入" clearable  style="width: 260px;" />
                </el-form-item>
                <el-form-item label="靠泊码头:">
                    <el-select v-model="formInline.name2" placeholder="请选择" clearable  style="width: 260px;">
                        <el-option label="码头one" value="shanghai" />
                        <el-option label="码头two" value="beijing" />
                    </el-select>
                </el-form-item>
                <div class="form_title">计划</div>
                <el-form-item label="计划到厂时间:">
                    <el-date-picker v-model="formInline.name3" type="date" placeholder="请选择" clearable style="width: 260px;" />
                </el-form-item>
                <el-form-item label="计划靠泊时间:">
                    <el-date-picker v-model="formInline.name3" type="date" placeholder="请选择" clearable style="width: 260px;" />
                </el-form-item>
                <el-form-item label="计划离岸时间:">
                    <el-date-picker v-model="formInline.name3" type="date" placeholder="请选择" clearable style="width: 260px;" />
                </el-form-item>
                <el-form-item label="计划来煤重量:">
                    <el-input v-model="formInline.name1" placeholder="请输入" clearable  style="width: 260px;" />
                </el-form-item>
            </el-form>

            <div class="form_title">实际</div>
            <ul class="edit_info">
                <li>
                    <span>实际靠泊时间:</span>
                    <p>2023-11-12</p>
                </li>
                <li>
                    <span>实际离岸时间:</span>
                    <p>2023-09-09</p>
                </li>
                <li>
                    <span>实际来煤重量:</span>
                    <p>8909吨</p>
                </li>
            </ul>
            <div class="form_title">偏差</div>
            <ul class="edit_info">
                <li>
                    <span>靠岸时间偏差:</span>
                    <p><strong class="red">提前3天</strong></p>
                </li>
                <li>
                    <span>离岸时间偏差:</span>
                    <p><strong class="red">+3</strong></p>
                </li>
                <li>
                    <span>来煤重量偏差:</span>
                    <p><strong class="red">延后2天</strong></p>
                </li>
                <li>
                    <span>备注/原因:</span>
                    <p>船出故障，停留了多日。滞留费用对方已支付。</p>
                </li>
            </ul>

            <div class="form_title">来煤计划明细</div>
            <div class="table_info small">
                <table>
                    <colgroup>
                        <col width="30%">
                        <col width="20%">
                        <col width="20%">
                        <col width="20%">
                        <col width="10%">
                    </colgroup>
                    <tr>
                        <th>批次号</th>
                        <th>所属煤种</th>
                        <th>热值</th>
                        <th>重量</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(item,index) in addInfoList">
                        <td>
                            <el-input v-model="item.name1" input-style="text-al" placeholder="填写批次号或对接口获取" />
                        </td>
                        <td>
                            <el-select v-model="item.name2" placeholder="请选择"  >
                                <el-option
                                    v-for="item in coalTypes"
                                    :key="item.ftId"
                                    :label="item.ftName"
                                    :value="item.ftCode"
                                />
                            </el-select>
                        </td>
                        <td>
                            <el-input v-model="item.name3" placeholder="" />
                        </td>
                        <td>
                            <el-input v-model="item.name4" placeholder="" />
                        </td>
                        <td>
                            <img @click="clickDelInfoData(index)" src="../../assets/img/ico_del.png" alt="">
                        </td>
                    </tr>
                </table>
            </div>
            <div class="mt15" @click="clickAddInfoData">
                <img src="../../assets/img/ico_add.png" alt="">
            </div>
            <div class="checkbox_zd">
                <el-checkbox v-model="checkedVal" label="自动记录到“来煤记录”" />
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;" >
                    修改
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 弹出框/详情 -->
    <el-dialog v-model="infoDialogVisible" title="来煤计划详情" width="900" :align-center="true">
        <div class="dialog_main">
            <ul class="edit_info mt15">
                <li>
                    <span>航次:</span>
                    <p>112</p>
                </li>
                <li>
                    <span>船名:</span>
                    <p>天成</p>
                </li>
                <li>
                    <span>供应商名称:</span>
                    <p>华南</p>
                </li>
                <li>
                    <span>入厂质量验收:</span>
                    <p>海关</p>
                </li>
                <li>
                    <span>靠泊码头:</span>
                    <p>华南</p>
                </li>
            </ul>
            <div class="form_title">计划</div>
            <ul class="edit_info">
                <li>
                    <span>计划到厂时间:</span>
                    <p>2023-11-12</p>
                </li>
                <li>
                    <span>计划靠泊时间:</span>
                    <p>2023-09-09</p>
                </li>
                <li>
                    <span>计划离岸时间:</span>
                    <p>8909吨</p>
                </li>
            </ul>
            <div class="form_title">实际</div>
            <ul class="edit_info">
                <li>
                    <span>实际靠泊时间:</span>
                    <p>2023-11-12</p>
                </li>
                <li>
                    <span>实际离岸时间:</span>
                    <p>2023-09-09</p>
                </li>
                <li>
                    <span>实际来煤重量:</span>
                    <p>8909吨</p>
                </li>
            </ul>
            <div class="form_title">偏差</div>
            <ul class="edit_info">
                <li>
                    <span>靠岸时间偏差:</span>
                    <p><strong class="red">提前3天</strong></p>
                </li>
                <li>
                    <span>离岸时间偏差:</span>
                    <p><strong class="red">+3</strong></p>
                </li>
                <li>
                    <span>来煤重量偏差:</span>
                    <p><strong class="red">延后2天</strong></p>
                </li>
                <li>
                    <span>备注/原因:</span>
                    <p>船出故障，停留了多日。滞留费用对方已支付。</p>
                </li>
            </ul>

            <div class="form_title">来煤计划明细</div>
            <div class="table_info small">
                <table>
                    <colgroup>
                        <col width="30%">
                        <col width="20%">
                        <col width="20%">
                        <col width="20%">
                    </colgroup>
                    <tr>
                        <th>批次号</th>
                        <th>所属煤种</th>
                        <th>热值</th>
                        <th>重量</th>
                    </tr>
                    <tr>
                        <td>
                            2023090713
                        </td>
                        <td>
                            褐煤
                        </td>
                        <td>
                            3800
                        </td>
                        <td>
                            1870
                        </td>
                    </tr>
                    <tr>
                        <td>
                            2023090713
                        </td>
                        <td>
                            褐煤
                        </td>
                        <td>
                            3800
                        </td>
                        <td>
                            1870
                        </td>
                    </tr>
                </table>
            </div>

            <!-- <div class="checkbox_zd">
                <el-checkbox v-model="checkedVal" label="自动记录到“来煤记录”" />
            </div> -->
        </div>
    </el-dialog>

    <!-- 弹出框/预测 -->
    <el-dialog v-model="forecastVisible" title="煤炭接卸预测" width="1500" :align-center="true">
        <div class="dialog_main">
            <div class="forecast_title">
                2023年9月份煤船接卸预测表（生成日期：2023–9-09）
            </div>
            <el-form :inline="true" :model="formForecast">
                <el-form-item label="本月计划电量:">
                    <el-input v-model="formForecast.name1" placeholder="" style="width: 180px;" >
                        <template #append>亿</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="计划日耗煤:">
                    <el-input v-model="formForecast.name2" placeholder="" style="width: 180px;" >
                        <template #append>万吨</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="运行机组数量:">
                    <el-input v-model="formForecast.name3" placeholder="" style="width: 180px;" >
                        <template #append>个</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="每日耗煤:">
                    <el-input v-model="formForecast.name4" placeholder="" style="width: 180px;" >
                        <template #append>万吨</template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" color="#2565C8">设置</el-button>
                </el-form-item>
            </el-form>
            <div class="table_info">
                <table>
                    <tr>
                        <th>序号</th>
                        <th>航次</th>
                        <th>船名</th>
                        <th>供应商</th>
                        <th>靠泊码头</th>
                        <th>计划靠泊时间</th>
                        <th>计划离岸时间</th>
                        <th>所属煤种</th>
                        <th>热值</th>
                        <th>来煤重量</th>
                        <th>到厂前库存</th>
                        <th>加船上库存</th>
                        <th>入厂质量验收</th>
                    </tr>
                    <tr v-for="(item,index) in 9">
                        <th>{{ index+1 }}</th>
                        <td>156</td>
                        <td>厦门国贸</td>
                        <td>厦门国贸</td>
                        <td>可门</td>
                        <td>2023-09-09</td>
                        <td>2023-09-09</td>
                        <td>平煤</td>
                        <td>3800</td>
                        <td>10900</td>
                        <td>10900</td>
                        <td>108500</td>
                        <td>海关</td>
                    </tr>
                    <tr class="table_bg">
                        <td colspan="9"></td>
                        <td>85482</td>
                        <td>月末库存(预测)</td>
                        <td>888128</td>
                        <td></td>
                    </tr>
                </table>
                <div class="remark">
                    <strong>备注：</strong>
                    <p>
                        1、3月份计划电量10.27亿，耗煤量约49.30万吨，计划日耗煤1.59万吨，预测月末可用库存54.54万吨。<br>
                        2、目前3机运行按1.7万吨/天计划，预测月末可用库存51.14万吨。<br>
                        3、红字体日期为暂定。
                    </p>
                </div>
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;">
                    下载
                </el-button>
            </div>
        </template>
    </el-dialog>


    <!-- 弹出框 -->
    <el-dialog v-model="tableDialogVisible" width="400" :align-center="true" center>
        <div class="table_dialog">
            <img src="../../assets/img/ico_5.png" alt="">
            <strong>您确定要保存修改内容吗？</strong>
            <span>
                修改内容保存后不可撤回，且会覆盖之前数据
            </span>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="tableDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="clickTableDialog">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

    <div class="record_search">
        <div class="record_search_time">
            <div class="name">航次:</div>
            <div class="item">
                <el-input v-model="inputVal1" style="width: 140px" placeholder="请输入" />
            </div>
            <div class="name ml30">船名:</div>
            <div class="item">
                <el-input v-model="inputVal2" style="width: 140px" placeholder="请输入" />
            </div>
            <div class="name ml30">靠岸(实际)时间:</div>
            <div class="item"><el-button :class="searchTimeIndex == 0 ? 'hover' : ''"
                    @click="clickSearchTime(0)">近一天</el-button></div>
            <div class="item"><el-button :class="searchTimeIndex == 1 ? 'hover' : ''"
                    @click="clickSearchTime(1)">近一周</el-button></div>
            <div class="item"><el-button :class="searchTimeIndex == 2 ? 'hover' : ''"
                    @click="clickSearchTime(2)">近一个月</el-button></div>
            <div class="item">
                <el-date-picker v-model="searchTime" type="date" placeholder="请选择" @change="changeSearchTime"
                    style="width: 140px;" />
            </div>
            <div class="item">
                <el-select v-model="state" placeholder="请选择" style="width: 100px">
                    <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div class="item">
                <el-button type="primary" color="#2565C8">搜索</el-button>
            </div>
            <div class="item">
                <el-button style="padding:0 8px;">
                    <el-icon size="20">
                        <Refresh />
                    </el-icon>
                </el-button>
            </div>

        </div>
    </div>

    <div class="box_bg mt15">
        <div class="record_set">
            <el-button type="primary" color="#2565C8" @click="forecastVisible = true">煤船接卸预测</el-button>
            <el-button type="primary" color="#2565C8">导出</el-button>
            <el-button type="primary" color="#2565C8" @click="addDialogVisible = true">新增</el-button>
        </div>
        <div class="table_list mt15">
            <el-table class="custom-table" :data="listTableData" size="large" :border="false" :stripe="false"
                :highlight-current-row="false" :height="tableHeight" :header-cell-style="headerCellStyle"
                style="width: 100%;" :row-class-name="rowClassName" ref="multipleTableRef"
                @selection-change="handleSelectionChange">

                <el-table-column type="selection" width="50" align="right" />
                <el-table-column type="expand">
                    <template #default="props">
                        <div class="table_list_info" :class="rowInfoClassName(props.row.id)">
                            <div class="table_info">
                                <table>
                                    <tr>
                                        <th>计划到厂时间</th>
                                        <th>计划靠泊时间</th>
                                        <th>计划来煤重量</th>
                                        <th>实际靠岸时间</th>
                                        <th>实际离岸时间</th>
                                        <th>
                                            <div style=" display: flex;align-items: center;justify-content: center;">
                                                实际来煤重量
                                                <el-popover placement="bottom" :width="200" trigger="hover"
                                                    :content="'备注/原因：'+props.row.remark">
                                                    <template #reference>
                                                        <el-icon color="#91A2BE">
                                                            <QuestionFilled />
                                                        </el-icon>
                                                    </template>
                                                </el-popover>
                                            </div>
                                        </th>
                                    </tr>
                                    <tr>
                                        <td>{{ props.row.planArriveTime }}</td>
                                        <td>{{ props.row.planInTime }}</td>
                                        <td>{{ props.row.planWeight }}</td>
                                        <td>{{ props.row.actureInTime }}</td>
                                        <td>{{ props.row.actureOutTime }}</td>
                                        <td>{{ props.row.actureWeight }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="航次" prop="shipNo" />
                <el-table-column label="船名" prop="shipName" />
                <el-table-column label="供应商" prop="suplierId" />
                <el-table-column label="靠泊码头" prop="berthingDock" />
                <el-table-column label="入厂质量验收" prop="entryQuality" />
                <el-table-column label="靠岸时间偏差" prop="xgkbsj">
                    <template #default="props">
                        <p class="red">{{ props.row.xgkbsj }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="离岸时间偏差" prop="xglbsj">
                    <template #default="props">
                        <p class="green">{{ props.row.xglbsj }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="重量偏差" prop="planWeight">
                    <template #default="props">
                        <p :class="props.row.planWeight>=props.row.actureWeight?'green':'yellow'" >{{ props.row.planWeight - props.row.actureWeight }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="状态" prop="currentStatus" >
                    <!-- 当前状态,0-未到达,1-已到达、未离岸,2-已到达、已离岸 -->
                    <template #default="props">
                        <p v-if="props.row.currentStatus == 0">未到达</p>
                        <p v-if="props.row.currentStatus == 1">已到达、未离岸</p>
                        <p v-if="props.row.currentStatus == 2">已到达、已离岸</p>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" min-width="170">
                    <template #default="scope">
                        <div class="table_btn">
                            <a href="javascript:;" @click="clickDelCoalInPlan(scope.row.id)">删除</a>|
                            <a href="javascript:;" @click="editDialogVisible = true">修改</a>|
                            <a href="javascript:;" @click="infoDialogVisible = true">详情</a>
                        </div>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <div class="pagination">
            <el-pagination background layout="prev, pager, next" :total="1000" />
        </div>

    </div>
    <router-view />
</template>
<style scoped lang="scss">


::v-deep(.el-table__body-wrapper) {
    background: #F6FAFE !important;
}

::v-deep(.el-table__inner-wrapper:before) {
    display: none; //下边线
}

::v-deep(.el-table thead th) {
    color: #333 !important;
    background: #CCDDF9;
}

::v-deep(.el-table__body) {
    border-spacing: 0px 13px !important;
}

::v-deep(.el-table__row td) {
    border-top: 1px solid #E0E5ED !important;
    border-bottom: 1px solid #E0E5ED !important;
}

::v-deep(.el-table__row td:first-child) {
    border-left: 1px solid #E0E5ED !important;
}

::v-deep(.el-table__row td:last-child) {
    border-right: 1px solid #E0E5ED !important;
}

::v-deep(.el-table__row:hover td) {
    background: #ecf5ff !important;
}

::v-deep(.el-table__expanded-cell) {
    border: 1px solid #E0E5ED !important;
    padding: 0 !important;
    //border-top: none !important; 
}

// ::v-deep(.el-table__expanded-cell td){
//     background: #ecf5ff!important;
// }
::v-deep(.el-table__expanded-cell:hover) {
    background-color: #ecf5ff !important;
}

::v-deep(.el-table__row.selected-row td) {
    background: #FFDE9A !important;
}
</style>